<div class="layui-card-header">预算</div>
<div class="dialog-wrap">
    <form class="layui-form layui-user-from" action="">
        <div class="layui-row">
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">年份</label>
                    <div class="layui-input-block">
                        <select name="">
                            <option value=""></option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">月份</label>
                    <div class="layui-input-block">
                        <select name="">
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">部门</label>
                    <div class="layui-input-block">
                        <select name="">
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12 text-center pt-10 pb-10">
                <a class="layui-btn layui-btn-xs layui-bg-lightblue">import</a>
                <a class="layui-btn layui-btn-xs layui-bg-lightblue">export</a>
                <a class="layui-btn layui-btn-xs layui-bg-lightblue" lay-submit lay-filter="search">search</a>
                <a class="layui-btn layui-btn-xs layui-bg-lightblue" data-type="cutOff">cut off</a>
            </div>
        </div>

        <div class="layui-table-modular" style="min-height: 700px">
            <table class="layui-hide" id="forecastTable" lay-filter="forecastTable"></table>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'table', 'utils', 'laytpl', 'miniPage'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            table = layui.table,
            laytpl = layui.laytpl,
            miniPage = layui.miniPage,
            utils = layui.utils;


        form.render();


        var tableIns = table.render({
            elem: '#forecastTable',
            url: 'api/finance/table.json',
            skin: 'line',
            headers: {"token": sessionStorage.getItem("token")},
            method: 'post',
            contentType: 'application/json',
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'id', align: 'center', title: 'Id'},
                    {field: 'JobOrderNumber', title: 'JobOrderNumber'},
                    {field: 'Date', title: 'OnBoard Date'},
                    {field: 'Branch', title: 'Branch'},
                    {field: 'Year', align: 'center', title: 'Year'},
                    {field: 'Month', align: 'center', title: 'Month'},
                    {field: 'GP', align: 'center', title: 'GP'},
                    {field: 'Status', align: 'center', title: 'Status'},
                    {align: 'center', title: 'Operation',
                        templet: function (d) {
                            return '<a class="layui-btn layui-btn-xs layui-bg-lightblue" href="javascript:;" lay-event="edit">edit</a>'
                        }
                    }
                ]
            ],
            page: true,
            request: {
                pageName: 'pageIndex',
                limitName: 'pageSize'
            },
            response: {
                statusCode: 200
            },
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.data.total,
                    "data": res.data.records
                };
            }
        });

        // 搜索
        form.on('submit(search)', function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });

        // 监听工具条
        table.on('tool(forecastTable)', function (obj) {
            switch(obj.event){
                // 修改forecast
                case 'edit':
                    var content = miniPage.getHrefContent('page/finance/forecast/edit.html');
                    if (content) {
                        layer.open({
                            title: '修改Forecast',
                            area: ['1000px', '400px'],
                            type: 1,
                            shade: 0.2,
                            content: content,
                            btn: ['确认', '取消'],
                            btnAlign: 'c',
                            yes: function(index, layero){
                                layero.find('[lay-filter="saveBtn"]').click();
                            },
                        });
                    }
                    break;
            }
        });

        // 自定义事件
        var formActive = {
            cutOff: function(){
                var checkStatus = table.checkStatus('forecastTable');
                var arr = [];
                checkStatus.data.forEach(function(item) {
                    arr.push(item.id)
                });
                layer.confirm('确定要截止吗？', {title: '信息', btn: ['确定', '删除']}, function(index){
                    utils.Ajax({
                        url: '',
                        dataType: 'json',
                        type: 'post',
                        data: {data: JSON.stringify(arr)},
                        success: function (response) {
                            tableIns.reload({
                                where: data.field,
                                page: {
                                    curr: 1
                                }
                            });
                            layer.close(index);
                        }
                    });
                });
            }
        };

        $('.layui-user-from .layui-btn').on('click', function(){
            var type = $(this).data('type');
            formActive[type] ? formActive[type].call(this) : '';
        });

    });

</script>
